<template>
  <div class="productList" ref="container">
    <div class="recommend" v-if="listType === 'recommend'">
      <div class="title acea-row row-center-wrapper">
        <span class="iconfont icon-zhuangshixian"></span>
        <span class="name">为你推荐</span>
        <span class="iconfont icon-zhuangshixian lefticon"></span>
      </div>
    </div>
    <div class="acea-row row-around row-middle bg-color-white screen-bar" v-if="showFilter">
      <div
        class="item"
        :class="[screenCurrent === 0 ? 'font-color-main' : 'font-color-gray-dk']"
        @click="set_where(0)"
      >
        {{ title ? title : "默认" }}
      </div>
      <div class="item" :class="[screenCurrent === 1 && price != 0 ? 'font-color-main' : 'font-color-gray-dk']" @click="set_where(1)">
        价格
        <img src="@assets/images/horn.png" v-if="price === 0" />
        <img src="@assets/images/up-main.png" v-if="price === 1" />
        <img src="@assets/images/down-main.png" v-if="price === 2" />
      </div>
      <div class="item" :class="[screenCurrent === 2 && stock != 0 ? 'font-color-main' : 'font-color-gray-dk']" @click="set_where(2)">
        销量
        <img src="@assets/images/horn.png" v-if="stock === 0" />
        <img src="@assets/images/up-main.png" v-if="stock === 1" />
        <img src="@assets/images/down-main.png" v-if="stock === 2" />
      </div>
      <!-- <div
        class="item"
        :class="nows ? 'font-color-main' : ''"
        @click="set_where(3)"
      >
        新品
      </div> -->
      <div
          class="iconfont"
          :class="isSort === true ? 'icon-pailie' : 'icon-tupianpailie'"
          @click="switchTap"
          v-if="listType !== 'privilege'"
        ></div>
    </div>
    <div
      class="list acea-row row-between-wrapper"
      :class="isSort === true ? '' : 'on'"
      ref="container"
    >
      <router-link
        class="item"
        v-for="(item, index) in goodList"
        :key="index"
        :to="{path: '/detail/' + item.id}"
        :title="item.store_name"
        :class="[isNovice && +item.privilege > 0 ? 'noviceLabel' : '', isSort === true ? '' : 'on']"
        :style="{padding: listType === 'privilege' ? '0' : '', borderTop: listType === 'privilege' ? '0' : ''}"
      >
        <div class="pictrue" :class="isSort === true ? '' : 'on'" :style="{height: listType === 'privilege' ? '2.4rem' : '', width: listType === 'privilege' ? '2.4rem' : ''}">
          <img :src="item.image" :class="isSort === true ? '' : 'on'" />
        </div>
        <div v-if="listType !== 'privilege'" class="text" :class="isSort === true ? '' : 'on'">
          <div :class="isSort === true ? '' : 'on'">
            <span class="font-xs font-bold font-color-orange">￥<span class="font-md">{{ isNovice && +item.privilege > 0 ? item.privilege : item.price }}</span></span>
            <span class="font-xxxs font-color-gray text-strikethrough ml-xs">原价￥333</span>
          </div>
          <div class="labelGroup">
            <span v-if="item.is_hot" class="label label-danger-solid font-xxxs">爆款</span>
            <span v-if="item.is_new" class="label label-success-solid font-xxxs">新品</span>
            <span v-if="item.is_best" class="label label-main-solid font-xxxs">精选</span>
          </div>
          <div class="font-color-gold font-xxs">{{ item.manufacturer }}</div>
          <div class="name line1 font-sm mt-xs">{{ item.store_name }}</div>
          <div
            class="font-xxs font-color-gray"
            :class="isSort === true ? '' : 'on'"
          >
            <div>已售{{ item.sales }}件</div>
          </div>
        </div>
        <div v-if="listType === 'privilege'" class="text flex-wrap" :class="isSort === true ? '' : 'on'" style="width: 65%; display: flex; align-items: space-between;">
          <div class="w-full">
            <div class="name line1 font-sm mt-xs">{{ item.store_name }}</div>
            <div class="labelGroup" v-if="item.is_best || item.manufacturer" :style="{lineHeight: listType === 'privilege' ? '2' : ''}">
              <span v-if="item.is_hot && listType !== 'privilege'" class="label label-danger-solid font-xxxs">爆款</span>
              <span v-if="item.is_new && listType !== 'privilege'" class="label label-success-solid font-xxxs">新品</span>
              <span v-if="item.is_best" class="label label-main-solid font-xxxs">精选</span>
              <span class="font-color-gold font-xxs" :class="item.is_best ? 'ml-xs' : ''">{{ item.manufacturer }}</span>
            </div>
            <div
              class="font-xxs font-color-gray"
              :class="isSort === true ? '' : 'on'"
            >
              <div>已售{{ item.sales }}件</div>
            </div>
          </div>
          <div :class="isSort === true ? '' : 'on'" class="w-full type-flex justify-between align-end pb-xs">
            <span class="font-xs font-color-orange">￥<span class="font-md">{{ isNovice && +item.privilege > 0 ? item.privilege : item.price }}</span></span>
            <!-- <span class="font-xxxs font-color-gray text-strikethrough ml-xs">原价￥333</span> -->
            <span class="btn-sm">立即使用</span>
            <span v-if="+item.use_privilege > 0" class="popover">特权金减{{ item.use_privilege }}元</span>
          </div>
        </div>
      </router-link>
    </div>
    <div
      class="noCommodity"
      v-cloak
      style="background-color: #fff; border-top:0;"
      v-if="goodList.length === 0 && where.page > 1"
    >
      <div class="noPictrue">
        <img src="@assets/images/noGood.png" class="image" />
      </div>
    </div>
    <Loading :loaded="loadend" :loading="loading"></Loading>
  </div>
</template>
<script>
import debounce from "lodash.debounce";
import Loading from "@components/Loading";
import { getCategory, getProducts } from "@api/store";
export default {
  name: "GoodListIndex",
  components: {
    Loading,
  },
  props: {
    // 列表类型   index, 首页默认列表 || recommend, 推荐列表 || privilege, 特权金列表
    listType: {
      type: String,
      default: 'index'
    },

    // 下拉加载监听对象（父组件，Event对象）
    obj: null,

    // 视图切换
    isSort: {
      type: Boolean,
      default: true
    },
    // 关键词
    keyword: {
      type: String,
      default: ''
    },
    // 一级分类id
    categoryId: {
      type: Number,
      default: 0
    },
    // 二级分类id 
    subCategoryId: {
      type: Number,
      default: 0
    },
    // 筛选导航默认标题
    defaultTitle: {
      type: String,
      default: ''
    },
    // 显示筛选栏
    showFilter: {
      type: Boolean,
      default: true
    },
    // 仅显示新品
    isNew: {
      type: Boolean,
      default: false
    },

    // 是否为特权金商品
    isPrivilegeMoney: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    $route(n) {
      this.$set(this, "goodList", []);
      this.where.keyword = this.keyword;
      this.where.page = 1;
      this.where.cid = this.categoryId;
      this.where.sid = this.subCategoryId;
      this.where.teq = this.isPrivilegeMoney;
      this.title = this.defaultTitle && (this.categoryId || this.subCategoryId) ? this.defaultTitle : "";
      this.nows = this.isNew;
      this.price = 0;
      this.stock = 0;
      this.loadend = false;
      this.loading = false;
      
      this.$store.dispatch('USERINFO', true);
      this.get_product_list();
      setTimeout(() => {
        this.isNovice = +this.$store.state.app.userInfo.is_new ? true : false;
      }, 1800);

    }
  },
  data: function() {
    return {
      isNovice: false,

      goodList: [],
      screenCurrent: 0,
      where: {
        page: 1,
        limit: 8,
        keyword: this.keyword,
        cid: this.categoryId, //二级分类id
        sid: this.subCategoryId, //二级分类id
        news: 0,
        priceOrder: "",
        salesOrder: "",
        teq: 0
      },
      title: this.defaultTitle && (this.categoryId || this.subCategoryId) ? this.defaultTitle : "",
      loadTitle: "",
      loading: false,
      loadend: false,
      price: 0,
      stock: 0,
      nows: this.isNew,
      fixedHeader: false
    };
  },
  created() {
    this.$store.dispatch('USERINFO', true);
    this.get_product_list();
    setTimeout(() => {
      this.isNovice = +this.$store.state.app.userInfo.is_new ? true : false;
    }, 1800);
  },
  mounted() {
    this.$scroll((this.obj || this.$el.parentElement), () => {
      !this.loading && this.get_product_list();
    });
  },
  destroyed() {
    this.$set(this, "goodList", []);
  },
  methods: {
    get_product_list: debounce(function() {
      var that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      this.setWhere();
      let q = that.where;
      getProducts(q).then(res => {
        that.loading = false;
        that.goodList.push.apply(that.goodList, res.data);
        that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
        that.where.page = that.where.page + 1;
      });
    }, 300),

    //点击事件处理
    set_where: function(index) {
      this.screenCurrent = index;
      let that = this;
      switch (index) {
        case 0:
          that.price = 0, that.stock = 0;
          break;
        case 1:
          if (that.price === 0) that.price = 1;
          else if (that.price === 1) that.price = 2;
          else if (that.price === 2) that.price = 0;
          that.stock = 0;
          break;
        case 2:
          if (that.stock === 0) that.stock = 1;
          else if (that.stock === 1) that.stock = 2;
          else if (that.stock === 2) that.stock = 0;
          that.price = 0;
          break;
        case 3:
          that.nows = !that.nows;
          break;
        default:
          break;
      }
      if (that.price == 0&&that.stock == 0) {
        that.screenCurrent = 0;
      }
      that.$set(that, "goodList", []);
      that.where.page = 1;
      that.loadend = false;
      that.get_product_list();
    },
    //设置where条件
    setWhere: function() {
      let that = this;
      if (that.price === 0) {
        that.where.priceOrder = "";
      } else if (that.price === 1) {
        that.where.priceOrder = "asc";
      } else if (that.price === 2) {
        that.where.priceOrder = "desc";
      }
      if (that.stock === 0) {
        that.where.salesOrder = "";
      } else if (that.stock === 1) {
        that.where.salesOrder = "asc";
      } else if (that.stock === 2) {
        that.where.salesOrder = "desc";
      }
      that.where.news = that.nows ? "1" : "0";
      this.where.teq = this.isPrivilegeMoney ? 1 : 0
    },
    switchTap: function() {
      let that = this;
      that.isSort = !that.isSort;
    }
  }
};
</script>

<style scoped>
/* 商品筛选栏 */
.screen-bar {
  height: .9rem;
}
.screen-bar img {
  width: 0.15rem;
  height: 0.19rem;
  margin-left: 0.1rem;
}
/* 商品列表 */
.productList .list{
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  align-items: flex-start;
}
.productList .list .item {
  position: relative;
  width: 50%;
  margin-top: 0;
  border-top: 1px solid #f4f4f4;
}
.productList .list .item:nth-child(odd) {
  border-right: 1px solid #f4f4f4;
}
.productList .list .item.noviceLabel.on::after {
  padding: 0.5% 3%;
  bottom: 20%;
}
.productList .list .item .pictrue {
  height: 3.75rem;
}
.productList .list .item .pictrue img, .productList .list .item .pictrue img.on {
  border-radius: 0;
}
.productList .list .item .btn-sm {
  padding: .14rem .26rem;
  font-size: .2rem;
  color: #fff;
  letter-spacing: .02rem;
  background-color: #a867e0;
}

.productList .list .item .popover {
  display: inline-block;
  padding: 0 .1rem;
  font-size: .2rem;
  transform: scale(.78);
  color: red;
  border: 1px solid red;
  background-color: #fff;
  position: absolute;
  right: 0;
  bottom: .82rem;
}
.productList .list .item .popover::after {
  content: "";
  display: block;
    height: 10px;
    width: 10px;
    background-color: inherit;
    border: inherit;
    position: absolute;
    bottom: -5px;
    left: calc(50% - 5px);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    transform: rotate(-45deg);
    border-radius: 0 0 0 2px;
}

.noCommodity {
  border-top: 3px solid #f5f5f5;
  padding-bottom: 1px;
}
</style>
